<template>
  <view class="container pageBg">
    <!-- 家庭信息卡片 -->
    <view class="family-card">
      <view class="family-header">
        <text class="family-name">{{ familyInfo.familyName }}</text>
        <text class="motto">「{{ familyInfo.motto }}」</text>
      </view>
      <view class="admin-info">
        <view class="info-item">
          <uni-icons type="person" size="18" color="#666"></uni-icons>
          <text>管理员：{{ familyInfo.adminName }}</text>
        </view>
        <view class="info-item">
          <uni-icons type="contact" size="18" color="#666"></uni-icons>
          <text>家庭账号：{{ familyInfo.adminAccount }}</text>
        </view>
      </view>
    </view>

    <!-- 家庭成员列表 -->
    <view class="member-list">
      <view class="list-header">
        <text>家庭成员</text>
        <button class="add-button" @click="navigateToAddMember">
          <uni-icons type="plusempty" size="18" color="#fff"></uni-icons>
          添加成员
        </button>
      </view>

      <view class="members">
        <view v-for="member in members" :key="member.id" class="member-card">
          <image 
            :src="member.avatar || '/static/default-avatar.png'" 
            class="avatar"
            mode="aspectFill"
          />
          <view class="member-info">
            <text class="name">{{ member.name }}</text>
            <text class="age-relation">{{ member.age }}岁 · {{ member.relation }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive,onMounted } from 'vue';
import {onShow} from "@dcloudio/uni-app"

// 家庭信息数据
const familyInfo = reactive({
  familyName: '幸福之家',
  motto: '家和万事兴',
  adminName: '张伟',
  adminAccount: 'family_2023'
});
onMounted(() => {
		console.log('页面初始化，开始请求验证码...')
		getFamilyInfo()
	})
onShow(()=>{
		getFamilyInfo()
	})
// 家庭成员数据
const members = reactive([]);


// 获取家庭成员的信息
const getFamilyInfo = () => {
  uni.request({
    url: "http://localhost:8081/sysUser/getFamilyInfo",
    method: "POST",
    header: {
      'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
    },
  }).then((res) => {
    if (res.data.code == "200") {
      const result = res.data.result;
      familyInfo.familyName = result.familyNickname;
      familyInfo.motto = result.familyMotto;
      familyInfo.adminName = result.userDOList[0].realName; 
      familyInfo.adminAccount = result.userDOList[0].account;

      members.splice(0, members.length, ...result.userDOList.map(user => ({
        id: user.account,
        name: user.nickname,
        age: new Date().getFullYear() - new Date(user.dateOfBirth).getFullYear(),
        relation: '成员',
        avatar: user.avatar
      })));
    } else {
      uni.showToast({
        title: "家庭信息请求失败,请先登录!",
        icon: 'none'
      })
    }
    console.log(res)
  })
};



// 跳转到添加成员页面
const navigateToAddMember = () => {
  uni.navigateTo({
    url: '/pages/add-member/add-member'
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.family-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  margin-bottom: 30rpx;

  .family-header {
    margin-bottom: 30rpx;
    .family-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }
    .motto {
      font-size: 26rpx;
      color: #666;
    }
  }

  .admin-info {
    .info-item {
      display: flex;
      align-items: center;
      margin: 15rpx 0;
      font-size: 28rpx;
      color: #444;

      uni-icons {
        margin-right: 10rpx;
      }
    }
  }
}

.member-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .add-button {
    background: linear-gradient(45deg, #ff9a44, #ff6b6b);
    color: #fff;
    border-radius: 40rpx;
    padding: 0 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
  }
}

.members {
  .member-card {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .member-info {
      .name {
        font-size: 30rpx;
        color: #333;
        display: block;
      }
      .age-relation {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>